<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}"/>
</head>
<style type="text/css">
    .formControls{
        margin-top: 50px;
    }
    .btn{
        margin-left: 680px;
        margin-bottom: 20px;
    }
</style>
<body>
<nav class="breadcrumb" style="margin-bottom: 5px"><i class="fa fa-cog"></i> 系统管理  <span
        class="c-gray en">&gt;</span> 门诊挂号管理 <span
        class="c-gray en">&gt;</span> 门诊挂号列表
</nav>

<div class="page-container" style="padding: 0 20px">
    <span id="toolbar">
        <shiro:hasPermission name="registered:insert">
            <a href="javascript:;" onclick="registered_insert()"
               class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加挂号</a>
        </shiro:hasPermission>
    </span>
        <form class="form form-horizontal" method="post" id="patientsForm" >
            <!-- 隐藏域 ，订单id-->
            <input type="hidden" name="registeredId">
            <label>诊断编号：</label>
            <span id="myNum"></span><br/>
            <div class="col-xs-4 col-sm-4" style="background-color: rgb(248,248,248);">
                <span style="color: deepskyblue;margin-left: 120px;top: 50px;">患者信息</span>
                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">姓名：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" onchange="patientNames()" class="input-text"  placeholder="请输入姓名" id="patientsName" name="patientsName">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">性别：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <span class="select-box" style="width:150px;">
                            <select class="select"  name="patientsGender" size="1">
                                <option value="">请选择性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">年龄：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" class="input-text"  placeholder="请输入姓名" id="patientsAge" name="patientsAge">
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">手机：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" class="input-text"  placeholder="请输入手机号" id="patientsPhone" name="patientsPhone">
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">身份证：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" class="input-text"  placeholder="请输入身份证" id="patientsIdcard" name="patientsIdcard">
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 50px;">住址：</label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="text" class="input-text"  placeholder="请输入现住址" id="patientsAddress" name="patientsAddress">
                    </div>
                </div>
            </div>
        </form>

            <form class="form form-horizontal" method="post" id="registeredForm" >

            <div class="col-xs-8 col-sm-8">
                <div class="col-xs-2 col-sm-2">
                    <input type="hidden" id="registeredNumber" name="registeredNumber"></label>
                </div>

                <div class="col-xs-12 col-sm-12">
                    <div class="col-xs-1 col-sm-1 col-xs-offset-1 col-sm-offset-1">
                        <input class="btn btn-primary radius" onclick="commit()" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" >科室：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 5px;">
                        <span class="select-box" style="width:150px;">
                            <select class="select"  name="deptName" size="1">
                                <option value="">请选择科室</option>
                                <option th:each="dept:${deptName}" th:value="${dept.deptName}" th:text="${dept.deptName}"></option>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" >医生：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 5px;">
                        <span class="select-box" style="width:150px;">
                            <select class="select" id="doctorName" name="doctorName" size="1">
                                <option value="">请选择医生</option>
                                <option th:each="doctor:${doctors}" th:data-uinqId="${doctor.doctorId}" th:value="${doctor.realname}" th:text="${doctor.realname}"></option>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" >挂号类别：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 5px;">
                        <span class="select-box" style="width:150px;margin-right: 10px;">
                            <select class="select" id="registrationType" name="registrationType" size="1">
                                <option value="">请选择挂号类别</option>
                                <option  th:each="registration:${registrationTypes}" th:data-uinqId="${registration.registrationId}" th:value="${registration.registrationType}" th:text="${registration.registrationType}"></option>
                            </select>
                        </span>
                    </div>
                </div>

                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 25px;">挂号费：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 20px;">
                        <span class="select-box" style="width:150px;">
                            <select class="select" id="registrationMoney"  name="registrationMoney" size="1">
                                <option value="">挂号费</option>
                                <option th:each="registration:${registrationMoneys}" th:data-uinqId="${registration.registrationId}" th:value="${registration.registerationMoney}" th:text="${registration.registerationMoney}"></option>
                            </select>
                        </span>
                    </div>
                </div>

                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 20px;">挂号日期：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 20px;">
                        <input style="width: 130px;" type="date" class="input-text" value="registeredDate"  placeholder="" id="registeredDate" name="registeredDate">
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6" style="margin-top: 20px;">时间：</label>
                    <div class="formControls col-xs-6 col-sm-6" style="margin-top: 20px;">
                        <span class="select-box" style="width:150px;">
                            <select class="select"  name="registeredTime" size="1">
                                <option value="">请选择时间</option>
                                <option value="上午">上午</option>
                                <option value="中午">中午</option>
                                <option value="下午">下午</option>
                            </select>
                        </span>
                    </div>
                </div>

                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6"></label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="hidden" class="input-text" id="patientName" name="patientName">
                    </div>
                </div>

                <div class="col-xs-4 col-sm-4">
                    <label class="form-label col-xs-6 col-sm-6"></label>
                    <div class="formControls col-xs-6 col-sm-6">
                        <input type="hidden" th:value="${session.doctor.realname}" class="input-text" id="jobName" name="jobName">
                    </div>
                </div>

                <!--bootstrap-table-->
                <table id="dataTable" style="margin-top: 20px;"></table>
            </div>
            </form>


        </form>

</div>

<script type="text/javascript" th:src="@{/lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>


<script type="text/javascript">
    $(function () {
        /*初始化bootstrap-table表格插件*/
        $('#dataTable').bootstrapTable({
            url: 'registered/list', //加载数据地址
            pagination: true,//是否显示分页条
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            pageNumber: 1,//默认的页面 第一页
            pageSize: 10,//默认的每页条数
            pageList: [10, 25, 50, 100],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            /*列*/
            columns: [
                {
                    field: 'registeredId', //后台返回的json格式的key
                    title: '序号' //显示给用户的标题
                },
                {
                    field: 'registeredDate',
                    title: '挂号日期'
                },

                {
                    field: 'registeredTime',
                    title: '时间'
                },
                {
                    field: 'deptName',
                    title: '科室名称'
                },
                {
                    field: 'doctorName',
                    title: '医生名称'
                },

                {
                    field: 'registrationType',
                    title: '挂号类型'
                },
                {
                    field: 'registrationMoney',
                    title: '挂号费'
                }
            ],
            /*条件搜索和分页ajax出发传递参数设置
            * 匿名函数就是每次分页或者搜索触发函数
            * 返回值就是要传递给后台的参数
            * params内置的默认参数
            * 开发者可以根据需求在函数内部组装参数传递给后台
            * */
            queryParams: function (params) {
                console.log(params);

                var paramsData = {
                    pageNum: params.offset / params.limit + 1,
                    pageSize: params.limit,
                    keyword: params.search
                };
                return paramsData;
            }

        });
    })

</script>


<script type="text/javascript">
    function commit() {

      var patientsForm=  $("#patientsForm").validate({
            rules:{
                patientsName:{
                    required: true
                },
                patientsGender:{
                    required: true
                },
                patientsAge:{
                    required: true
                },
                patientsIdcard:{
                    required: true
                },
                patientsPhone:{
                    required: true
                },
                patientsAddress:{
                    required: true,
                }
            },
            messages:{
                patientsName:{
                    required:""
                },
                patientsGender:{
                    required:""
                },
                patientsAge:{
                    required:""
                },
                patientsIdcard:{
                    required:""
                },
                patientsPhone:{
                    required:""
                },
                patientsAddress:{
                    required:""
                }

            }
        }).form()
      var registeredForm=  $("#registeredForm").validate({
            rules:{
                deptName:{
                    required: true
                },
                doctorName:{
                    required: true
                },
                registrationType:{
                    required: true
                },
                registrationDate:{
                    required: true
                },
                registrationTime:{
                    required: true
                }
            },
            messages:{
                deptName:{
                    required:""
                },
                doctorName:{
                    required:""
                },
                registrationType:{
                    required:""
                },
                registrationDate:{
                    required:""
                },
                registrationTime:{
                    required:""
                }

            }
        }).form()

        if (patientsForm && registeredForm){
            var resmsg=false;
            var resmsg2=false;

            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "registered/insert" ,//url
                data: $('#patientsForm').serialize(),
                success:function (data) {

                        //操作数据成功
                        if(data.code == 1){
                            resmsg=true
                            $("#patientsForm").find("input").val("");
                            $("#patientsForm").find("select").val("");
                            console.log("添加成功")
                        }
                }
            });

            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "registered/insertRegistered" ,//url
                data: $('#registeredForm').serialize(),
                success:function (data) {

                    layer.msg(data.msg, {icon: data.code, time: 2000}, function () {
                        //操作成功刷新数据
                        if (data.code == 1) {

                            //操作数据成功
                                resmsg2=true
                                $("#registeredForm").find("input").val("");
                                $("#registeredForm").find("select").val("");
                                console.log("添加成功")
                            }
                            refreshTable();
                    });

                }
            });

        }
    }

</script>


<script type="text/javascript">
    function patientNames() {
        var patientsName = $("#patientsName").val();
        $("#patientName").val(patientsName);
        console.log(patientsName)
    }

</script>


<script type="text/javascript">

    /*刷新表格函数*/
    function refreshTable() {
        //BootStrapTable刷新表格的方法
        $("#dataTable").bootstrapTable('refresh');
    }

    $(function(){
        //1.为客户下拉框绑定事件
        $("#registrationType").change(function () {

            //获取客户下拉框被选中 data-base_id的值（基础数据中区间的id）
            var registrationType = $("#registrationType option:selected").attr('data-uinqId')
            console.log(registrationType)

            //获取区间下拉框中的所有的option 并判断base_id的值是否和上面regionId相等，相等选中即可
            var options = $("#registrationMoney option");

            $.each(options,function (index,option) {
                //获取每个option选项的 data-base_id的值
                var registrationMoney = $(option).attr('data-uinqId');
                if (registrationType == registrationMoney){
                    $(option).prop("selected",true);
                }
            });

        });

    })

    $(function () {
        var sourceStr = "0,1,2,3,4,5,6,7,8,9";
        arrStr = sourceStr.split(",");
        var result = ""; //定义变量并初始化
        var index = 0;
        for (i = 0; i < 13; i++) {
            index = parseInt(Math.random() * arrStr.length);
            result += arrStr[index];
        }
        $("#myNum").text(result)
        $("#registeredNumber").val(result)
    })

</script>
</body>
</html>